<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
    </script>
</head>
<body>
<template id="tem">
    <div>
        <button @click="change(-1)">-</button>
        <span>
        {{count}}
    </span>
        <button @click="change(+1)">+</button>
    </div>
</template>
<!--<div style="display: none" id="tem">-->
<!---->
<!--</div>-->
<div id="app">
    <my-counter></my-counter>
    <my-counter></my-counter>
</div>
<script>
    <!--创建一个组件对象-->
    Vue.component('my-counter', {
        template: "#tem",
        data: function () {
            return {
                count: 1
            };
        },
        methods: {
            change(i) {
                this.count += i;
                if (this.count == 0) {
                    this.count = 1;
                }
            }
        }
    });
</script>
<script>
    var vm = new Vue(
        {
            el: "#app",
            data: {
                count: 1
            },
            methods: {
                change(i) {
                    this.count += i;
                    if (this.count == 0) {
                        this.count = 1;
                    }
                }
            }
        }
    );
</script>
</body>
</html>